<template>
    <div>
        <LButton @click="onBtnClick" v-if="props.btnContent">{{ props.btnContent }}</LButton>
        <transition enter-active-class="transition ease-out duration-100" enter-from-class="transform opacity-0 scale-95" enter-to-class="transform opacity-100 scale-100" leave-active-class="transition ease-in duration-75" leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95">
            <div v-if="props.visible" class="flex flex-col absolute right-1/4 top-10 mt-2 w-2/4 h-168 origin-top-right rounded-md bg-white shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none z-20">
                <div class="p-2">{{ props.title }}</div>
                <hr />
                <div class="p-2 flex-1">
                    <slot></slot>
                </div>
                <hr />
                <div class="p-2">
                    <div class="float-right flex">
                        <template v-if="$slots.footer">
                            <slot name="footer" />
                        </template>
                        <template v-else>
                            <LButton class="border-2" @click="onCancel" type="default">{{ props.cancelBtnText }}</LButton>
                            <LButton class="ml-2" @click="onConfirm">{{ props.confirmBtnText }}</LButton>
                        </template>
                    </div>
                </div>
            </div>
        </transition>
        <div v-if="visible" class="min-h-screen w-screen absolute left-0 top-0 float-right bg-slate-500 z-10 opacity-80"></div>
    </div>
</template>

<script setup>
import { defineProps } from "vue";
const emit = defineEmits("confirm");
const props = defineProps({
  btnContent: {
    type: String,
    required: true,
  },
  title: {
    type: String,
    required: true,
  },
  confirmBtnText: {
    type: String,
    default: "确定",
  },
  cancelBtnText: {
    type: String,
    default: "取消",
  },
  visible: {
    type: Boolean,
    default: false,
  },
});
const onBtnClick = () => {
  emit("update:visible", !props.visible);
};
const onConfirm = () => {
  emit("confirm");
};
const onCancel = () => {
  emit("cancel");
};
</script>